<template>

  <el-row>
    <el-col :span="24"><h1>通讯录</h1></el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-row>
        <el-input
            v-model="name"
            style="width: 240px"
            placeholder="输入姓名搜索"
            clearable
            :size="'default'"
        />
        &nbsp;
        <el-button type="warning" @click="searchByName">搜索</el-button>
        &nbsp;
        <el-button type="success" @click="dialogVisible = true">根据条件搜索</el-button>
        &nbsp;
        <el-button type="info" @click="clearSearchCondition">清空搜索条件</el-button>
      </el-row>
    </el-col>

  </el-row>
  <br><br>
  <el-row>
    <el-col :span="24">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="姓名" width="80"/>
        <el-table-column prop="majority" label="所读专业" />
        <el-table-column prop="classNum" label="班级序号" width="100"/>
        <el-table-column prop="entryYear" label="入学年份" />
        <el-table-column prop="graduateYear" label="毕业年份" />
        <el-table-column prop="employers" label="就业单位" />
        <el-table-column prop="city" label="所在城市" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="email" label="电子邮箱" />
      </el-table>
    </el-col>
  </el-row>
  <br><br>
  <el-row>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :background="true"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
    />
  </el-row>

  <el-dialog
      v-model="dialogVisible"
      title="条件搜索"
      width="400"
  >
    <el-form :model="condition" label-width="auto" style="max-width: 300px" :size="'default'" :rules="rule">
      <el-form-item  label="所读专业" prop="majority">
        <el-select
            v-model="condition.majority"
            placeholder="点击下拉框选择"
            size="default"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入学年份" prop="entryYear">
        <el-input v-model.number="condition.entryYear" />
      </el-form-item>
      <el-form-item label="毕业年份" prop="graduateYear">
        <el-input v-model.number="condition.graduateYear" />
      </el-form-item>
      <el-form-item label="所在城市">
        <el-input v-model="condition.city" />
      </el-form-item>
      <el-form-item label="就业单位">
        <el-input v-model="condition.employers" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model.number="condition.phone" />
      </el-form-item>
      <el-form-item label="电子邮件">
        <el-input v-model="condition.email" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="constSearchByCondition" :size="'default'">搜索</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import {Condition, ReturnUser} from "@/api/types/contacts.ts";
import {allUserContacts, searchContactsByCondition, searchContactsByName} from "@/api/contacts.ts";
import {getAllMajority} from "@/api/majority.ts";
import {Majority} from "@/api/types/majority.ts";
import {FormRules} from "element-plus";


onMounted(() => {
  allUserContacts().then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
  getAllMajority().then(data => {
    options.value = data.data
  })
})



const rule = reactive<FormRules<Condition>> ({
  phone: [
    {pattern: /^\d{11}$/, message: '电话号码长度为11位', trigger: 'blur' },
    {type: "number", message: '请输入数字', trigger: 'blur'}
  ],
  entryYear:  [
    {type: "number", message: '请输入数字', trigger: 'blur'}
  ],
  graduateYear:  [
    {type: "number", message: '请输入数字', trigger: 'blur'}
  ],
})

//专业选项
const options = ref<Majority[]>([])

//条件搜索的条件
const condition = reactive({
  classNum: '',
  majority: '',
  entryYear: '',
  graduateYear: '',
  employers: '',
  phone: '',
  email: '',
  city: ''
})

//对话框开启条件
const dialogVisible = ref(false)

const name = ref('')

//当前页号
const currentPage = ref(1)
//记录总数
const total = ref(0)
//一页的记录数
const pageSize = ref(7)

//所有数据
const totalDate = ref<ReturnUser[]>()

//当前页的数据
const tableData = ref<ReturnUser[]>()

const handleCurrentChange = (val: number) => {
  var startIndex = (val - 1) * pageSize.value
  total.value = <number>totalDate.value?.length
  tableData.value = totalDate.value?.slice(startIndex, startIndex + pageSize.value)
}

const searchByName = () => {
  searchContactsByName(name.value).then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
}

const clearSearchCondition = () => {
  allUserContacts().then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
  name.value = ''
  condition.email = ''
  condition.phone = ''
  condition.graduateYear = ''
  condition.entryYear = ''
  condition.classNum = ''
  condition.city = ''
  condition.employers = ''
  condition.majority = ''
}

const constSearchByCondition = () => {
  searchContactsByCondition(condition).then(data => {
    totalDate.value = data.data
    total.value = totalDate.value?.length
    handleCurrentChange(currentPage.value)
  })
  dialogVisible.value = false
}



</script>



<style scoped>

</style>
